<template>
    <div class="tabs-cont">
        <el-tabs tab-position="left" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="我的会员">
                <h2>我的会员</h2>
                <el-divider />
                <div class="table-cont">
                    <div class="text-cont">
                        <p>用户ID:</p>
                        <span>{{ userinfo ? userinfo.user_id : '' }}</span>
                    </div>
                    <el-divider />
                    <div class="text-cont">
                        <p>有效期 :</p>
                        <span>{{ expiretime }}</span>
                    </div>
                    <el-divider />
                </div>
            </el-tab-pane>
            <el-tab-pane label="我的团队">
                <h2>我的团队</h2>
                <el-divider />
                <div class="pe-num">
                    <p>团队人数:</p>
                    <span>{{ total }}</span>
                </div>
                <div class="team-table">
                    <el-table :data="tableData" style="width: 100%" stripe>
                        <el-table-column label="名称" prop="username" />
                        <el-table-column label="ID号" prop="id" />
                        <el-table-column label="发展日期" prop="createtime" />
                    </el-table>
                </div>
                <MyPaging :total="total" v-model="page" :pagesize="8" />
            </el-tab-pane>
            <el-tab-pane label="修改密码">
                <h2>修改密码</h2>
                <el-divider />
                <updatePassword />
            </el-tab-pane>
            <el-tab-pane label="我的订单">
                <h2>我的订单</h2>
                <el-divider />
                <div class="cart-list">
                    <cartList v-for="item in tablelist" :tabledata="item" />
                    <MyPaging :total="total1" v-model="page1" :pagesize="3" />
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { defineEmits, ref, watch } from 'vue';
import { useUser } from '../../../store/user'
import updatePassword from '../../components/update-password.vue';
import { UserTeam,UserInfo } from '../../../api/user'
import { Cartlist } from '../../../api/goods'
import cartList from './cart-list.vue';
const user = useUser()
let { userinfo } = user

// 选中标签
const emit = defineEmits()
const handleClick = (pane, ev) => {
    let { label } = pane.props
    emit('update:modelValue', label)
}

const expiretime=ref('')
UserInfo(userinfo.token).then(res=>{
    expiretime.value=res.data.data.expire_time
})
// 表格数据

const tableData = ref([])
const total = ref(0)
const page = ref(1)

const tablelist = ref([])
const total1 = ref(0)
const page1 = ref(1)
UserTeam(page.value, userinfo.token).then(res => {
    let { count, lists } = res.data.data
    tableData.value = lists
    total.value = count
})

watch(page, (n) => {
    UserTeam(n, userinfo.token).then(res => {
        let { count, lists } = res.data.data
        tableData.value = lists
        total.value = count
    })
})

Cartlist(page1.value, userinfo.token).then(res => {
    let { count, lists } = res.data.data
    tablelist.value = lists
    total1.value = count
})

watch(page1, (n) => {
    Cartlist(n, userinfo.token).then(res => {
        let { count, lists } = res.data.data
        tablelist.value = lists
        total1.value = count
    })
})



</script>

<style lang="scss" scoped>
.tabs-cont {
    .el-tabs {
        min-height: 2.6042rem;
    }

    h2 {
        padding: .1563rem 0 .1563rem .2604rem;
        font-size: .0938rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        line-height: .0885rem;
    }

    .table-cont {
        padding: 0 .6875rem 0 .2604rem;

        >div.text-cont {
            display: flex;
            padding: .1563rem 0 .1563rem .1042rem;
            font-size: .0938rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;

            >p {
                margin-right: .125rem;
            }
        }
    }
}

.pe-num {
    margin: .1563rem 0 .224rem .3646rem;
    display: flex;

    >p {
        margin-right: .0313rem;
        font-size: .0938rem;
        font-weight: 300;
        color: #333333;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    >span {
        font-size: .125rem;
        font-weight: bold;
        color: #333333;
    }
}

.team-table {
    padding: 0 .6875rem .3229rem .3646rem;
}

.cart-list {
    padding: .1563rem;
}
</style>
<style>
.el-tabs__item.is-left {
    width: 1.0417rem;
    height: .2083rem;
    background: #FFFFFF;
    font-size: .0729rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    line-height: .0885rem;
}

.el-tabs__nav {
    border-radius: .0208rem;
}

.el-tabs--left .el-tabs__item.is-left {
    justify-content: flex-start;
}

.el-tabs--left .el-tabs__active-bar.is-left {
    width: 0;
}

div.el-tabs__header {
    margin: 0 0 .1042rem;
}

.el-tabs__content {
    min-height: 2.6042rem;
    background: #FFFFFF;
    border-radius: .1042rem;
}
</style>

<style>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: .0729rem;
}

.item {
    margin-bottom: .0938rem;
}

.box-card {
    width: 2.5rem;
}

.el-divider--horizontal {
    margin: 0;
}

.el-tabs__item.is-left.is-active {
    background: #EEEEEE;
    font-size: .0833rem;
    font-weight: 400;
    color: #000000;
}
</style>